/*
 * @Author: zhangzhen
 * @Date: 2023-01-05 15:41:30
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-02-09 13:06:57
 *
 */
import React, {useContext, FC, useState, useCallback, useMemo} from 'react';
import {Input, Modal, Select, Checkbox, Button} from 'antd';
import {FormContext} from '../../context';
import styles from './styles.module.scss';

const ApiModal: FC<any> = () => {
    const {
        currentItem,
        currentIndex,
        formConTextValue,
        setFormConTextValue,
        setCurrentItem,
    } = useContext(FormContext);
    const [apiModalVisible, setApiModalVisible] = useState(false);

    // 设置值
    const setValue = useCallback(
        (key: string, value: any) => {
            const cloneValue = [...formConTextValue];
            cloneValue[currentIndex][key] = value;
            setFormConTextValue(cloneValue);
            setCurrentItem(cloneValue[currentIndex]);
        },
        [currentIndex, formConTextValue, setCurrentItem, setFormConTextValue],
    );

    const labelConnectOptions = useMemo(
        () =>
            formConTextValue
                .filter((item) => typeof(item.defaultValue)==="string"||typeof(item.defaultValue)==="number")
                .map((item) => ({label: item.label, value: item.defaultValue})),
        [formConTextValue],
    );

    return (
        <div>
            <Button
                onClick={() => {
                    setApiModalVisible(true);
                }}>
                配置
            </Button>
            <Modal
                getContainer={false}
                open={apiModalVisible}
                title="配置数据接口"
                destroyOnClose
                width={750}
                onCancel={() => {
                    setApiModalVisible(false);
                }}
                onOk={() => {
                    setApiModalVisible(false);
                }}>
                <div className={styles.apiModalBox}>
                    <div className={styles.labelConnect}>
                        <div>
                            <span>字段联动:</span>
                            <Select
                                style={{
                                    width: '150px',
                                    marginLeft: '5px',
                                    marginRight: '5px',
                                }}
                                options={labelConnectOptions}
                                placeholder="请选择"
                            />
                        </div>
                        <Input
                            style={{width: '350px'}}
                            value={currentItem.api}
                            placeholder="请输入"
                            onChange={(e) => {
                                setValue('api', e.target.value);
                            }}
                        />
                        <Button style={{marginLeft: '5px'}} onClick={() => {}}>
                            配置
                        </Button>
                    </div>

                    {/* 获取到的数据 */}
                    <div className={styles.apiInfoBox}>
                        <div className={styles.apiInfo}>
                            <span>数据获取内容:</span>
                            <Checkbox.Group
                                style={{marginLeft: '5px'}}
                                options={[{label: '数据', value: 1}]}
                            />
                        </div>
                        <div className={styles.apiInfoSelect}>
                            <span>内容处理方式:</span>
                            <Select
                                options={[
                                    {label: '计数', value: 1},
                                    {label: '直接罗列', value: 2},
                                ]}
                                placeholder="请选择"
                                style={{width: '150px', marginLeft: '5px'}}
                            />
                        </div>
                    </div>
                </div>
            </Modal>
        </div>
    );
};

export default ApiModal;
